<template>
  <!-- <a-drawer
    title="当前航段详情"
    placement="right"
    width="100%"
    class="fra-drawer fra-drawer-s"
    :closable="true"
    :mask="false"
    :visible="flightLegDetailsVisible"
    @close="onClose"
  > -->
  <a-col :span="24" class="flight-leg-details-data-main-box right-menu">
    <a-tabs v-model="repTab" @change="changeTabHandler">
      <a-tab-pane key="2" force-render>
        <span slot="tab" class="d-flex ai-center">
          格式化数据
          <a-icon
            type="printer"
            class="ml-6"
            @click="e => printerHandler(e, 2)"
          />
        </span>
      </a-tab-pane>
      <a-tab-pane key="1">
        <span slot="tab" class="d-flex ai-center">
          原始数据
          <a-icon
            type="printer"
            class="ml-6"
            @click="e => printerHandler(e, 1)"
          />
        </span>
      </a-tab-pane>
    </a-tabs>
    <div v-show="repTab === '1'" class="snapshot-data-s beauty-scroll">
      <div style="margin-top:-48px">
        {{ repShowData.content }}
      </div>
    </div>
    <div
      v-show="repTab !== '1'"
      class="snapshot-data-s2 beauty-scroll  fld-pre-main-box"
    >
      <a-spin :spinning="repAnalysisJsonLoading" class="w-100" />
      <div v-show="repShowData.smi !== 'CFD'">
        <div v-show="!repAnalysisJsonLoading">
          <div v-if="repAnalysisJsonTitleExist" class="format-top-table">
            <div class="format-top-table-item">
              <div class="format-top-table-item-th">ACID</div>
              <div class="format-top-table-item-td">
                {{ repAnalysisJsonTitle['ACID'] || '--' }}
              </div>
            </div>
            <div class="format-top-table-item">
              <div class="format-top-table-item-th">FLTNO</div>
              <div class="format-top-table-item-td">
                {{ repAnalysisJsonTitle['FLTNO'] || '--' }}
              </div>
            </div>
            <div class="format-top-table-item format-top-table-item-33">
              <div class="format-top-table-item-th">LEG DATE</div>
              <div class="format-top-table-item-td">
                {{
                  repAnalysisJsonTitle['LEG DATE']
                    ? $moment
                      .utc(repAnalysisJsonTitle['LEG DATE'])
                      .format('YYYY-MM-DD HH:mm:ss')
                    : '--'
                }}
              </div>
            </div>
            <div class="format-top-table-item">
              <div class="format-top-table-item-th">DEP</div>
              <div class="format-top-table-item-td">
                {{ repAnalysisJsonTitle['DEP'] || '--' }}
              </div>
            </div>
            <div class="format-top-table-item">
              <div class="format-top-table-item-th">ARR</div>
              <div class="format-top-table-item-td">
                {{ repAnalysisJsonTitle['ARR'] || '--' }}
              </div>
            </div>
          </div>
          <div
            v-if="repAnalysisJsonTitleExist"
            class="format-top-table mt-8 mb-12"
          >
            <div class="format-top-table-item format-top-table-item-50">
              <div class="format-top-table-item-th">TRANSMIT DATE</div>
              <div class="format-top-table-item-td">
                {{
                  repAnalysisJsonTitle['TRANSMIT DATE']
                    ? $moment
                      .utc(repAnalysisJsonTitle['TRANSMIT DATE'])
                      .format('YYYY-MM-DD HH:mm:ss')
                    : '--'
                }}
              </div>
            </div>
            <div class="format-top-table-item format-top-table-item-50">
              <div class="format-top-table-item-th">MESSAGE DATE</div>
              <div class="format-top-table-item-td">
                {{
                  repAnalysisJsonTitle['MESSAGE DATE']
                    ? $moment
                      .utc(repAnalysisJsonTitle['MESSAGE DATE'])
                      .format('YYYY-MM-DD HH:mm:ss')
                    : '--'
                }}
              </div>
            </div>
          </div>
          <div class="legend-box">
            <div class="b">
              <template v-for="(v, i) in legends_info">
                <div :key="i">
                  <div class="word">
                    <span>{{ v }}</span>
                  </div>
                  <div
                    class="idx"
                    :class="{
                      aa:
                        repShowData.content
                          .match(/-\s{2}\w{6}/)[0]
                          .slice(-2)
                          .includes(v.slice(-3, -1)) ||
                        repShowData.content
                          .match(/-\s{2}\w{6}/)[0]
                          .slice(-4, -2)
                          .includes(v.slice(-3, -1))
                    }"
                  >
                    {{ i + 1 }}
                    <div
                      v-if="
                        repShowData.content
                          .match(/-\s{2}\w{6}/)[0]
                          .slice(-2)
                          .includes(v.slice(-3, -1))
                      "
                      class="time"
                    >
                      {{
                        repAnalysisJsonTitle['MESSAGE DATE']
                          ? $moment
                            .utc(repAnalysisJsonTitle['MESSAGE DATE'])
                            .format('HH:mm')
                          : '--'
                      }}
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div v-html="htmlSourceCode" />
          <div v-html="repAnalysisJsonEnding" />
          <iframe v-show="false" id="rep-iframe-fd" frameborder="0" />
          <div v-show="false" v-html="repAnalysisJsonData" />
        </div>
      </div>
      <div v-show="repShowData.smi === 'CFD'">
        <div>
          <div class="item-details-item-box">
            <div>
              {{ cfdFormat[0] ? cfdFormat[0].msgType : '--' }} = Report Type
            </div>
            <div>
              {{
                cfdFormat[0] && cfdFormat[0].partNumber
                  ? cfdFormat[0].partNumber.join('，')
                  : '--'
              }}
              = CMC or LDI Part Number
            </div>
            <div>
              {{ cfdFormat[0] ? cfdFormat[0].computorSource : '--' }} = CMC
              Computer Source
            </div>
          </div>
          <div>
            <div
              v-for="item in tData"
              :key="item.id"
              class="cu-pointer"
              @click="e => clickEvent(e, item)"
            >
              <a-row class="item-details-item-box">
                <a-col :span="2">
                  <noticePriorityIcon
                    :is-etops="item.isEtops"
                    :priority="item.priority"
                    :msg-type="item.name"
                  />
                  <!-- <a-icon v-if="item.isEtops" :component="require('@/assets/icon/Fleet_Status_ETOPS.svg')" style="font-size:20px!important;vertical-align: top;" /> -->
                  <!-- <priorityIcon :priority="item.priority" /> -->
                </a-col>
                <a-col :span="2">
                  <span class="fs-15 mt-10 fw-b mr-10">{{ item.name }}</span>
                </a-col>
                <a-col :span="3">
                  <a class="fw-b">{{ item.code || '--' }}</a>
                </a-col>
                <a-col :span="11">
                  <a class="fw-b ">{{ item.description || '--' }}</a>
                </a-col>
                <a-col :span="4">
                  <div class="fs-14 fw-500">
                    {{
                      item.msgTime
                        ? $moment.utc(item.msgTime).format('YYYY-MM-DD HH:mm')
                        : '--'
                    }}
                  </div>
                </a-col>
                <a-col :span="2">
                  <div class="fw-b">
                    {{ item.activity ? activeHandler(item.activity) : '--' }}
                  </div>
                </a-col>

                <a-col v-for="ci in item.eventDetails" :key="ci.id" :span="24">
                  <a-row>
                    <a-col :offset="4" :span="14">
                      <div class="fs-13 text-over">
                        <span class="mr-10 fw-b">{{ ci.name || '--' }}</span>
                        <a>{{ ci.code || '--' }}</a>
                        <span
                          class="ml-10"
                        >{{ ci.intermittence || '--'
                        }}{{
                          $isNull(ci.intermittenceNum)
                            ? ''
                            : `(${ci.intermittenceNum || '--'})`
                        }}</span>
                        <span
                          class="ml-10"
                        >飞行阶段：{{ ci.phase || '--' }}</span>
                        <div class="fs-12">
                          {{ ci.description || '事件名称未找到，请联系管理员' }}
                        </div>
                        <div class="fs-12 d-flex">
                          <span>Detected by：</span>
                          <div>
                            <div v-for="dbItem in ci.detectedBy" :key="dbItem">
                              {{ dbItem }}
                            </div>
                          </div>
                        </div>
                        <div class="fs-12 ">
                          <span class="fw-b">Fault Report Code</span>：{{
                            ci.frc || '--'
                          }}
                        </div>
                        <div class="fs-12">
                          <span class="fw-b">Monitor Code</span>：{{
                            ci.mc || '--'
                          }}
                        </div>
                      </div>
                    </a-col>
                    <a-col :span="4">
                      <div class="fs-14 fw-500">
                        {{
                          ci.msgTime
                            ? $moment.utc(ci.msgTime).format('YYYY-MM-DD HH:mm')
                            : '--'
                        }}
                      </div>
                    </a-col>
                    <a-col :span="2">
                      <div class="fw-b">
                        {{ ci.activity ? activeHandler(ci.activity) : '--' }}
                      </div>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </div>

            <div class="wgwx-title mt-16 fs-14 fw-b mb-10">
              非关联的维护信息
            </div>
            <div
              v-for="item in bData"
              :key="item.id"
              class="cu-pointer"
              @click="e => clickEvent(e, item)"
            >
              <a-row class="item-details-item-box">
                <a-col :span="2">
                  <noticePriorityIcon
                    :is-etops="item.isEtops"
                    :priority="item.priority"
                    :msg-type="item.name"
                  />
                </a-col>
                <a-col :span="22">
                  <a-row>
                    <a-col :span="2">
                      <span class="fs-15 mt-10 fw-b mr-10">{{
                        item.name
                      }}</span>
                    </a-col>
                    <a-col :span="3">
                      <a class="fw-b">{{ item.code || '--' }}</a>
                    </a-col>
                    <a-col :span="5">
                      <span>{{ item.intermittence || '--'
                      }}{{
                        $isNull(item.intermittenceNum)
                          ? ''
                          : `(${item.intermittenceNum || '--'})`
                      }}</span>
                    </a-col>
                    <a-col :span="5">
                      <span>飞行阶段：{{ item.phase || '--' }}</span>
                    </a-col>
                    <a-col :span="4" :offset="3">
                      <div class="fs-14 fw-500">
                        {{
                          item.msgTime
                            ? $moment
                              .utc(item.msgTime)
                              .format('YYYY-MM-DD HH:mm')
                            : '--'
                        }}
                      </div>
                    </a-col>
                    <a-col :span="2">
                      <div class="fw-b">
                        {{
                          item.activity ? activeHandler(item.activity) : '--'
                        }}
                      </div>
                    </a-col>
                    <a-col :span="24">
                      <span class="fs-12 ">{{ item.description || '--' }}</span>
                    </a-col>
                    <a-col :span="24">
                      <div class="fs-12 d-flex">
                        <span>Detected by：</span>
                        <div>
                          <div v-for="dbItem in item.detectedBy" :key="dbItem">
                            {{ dbItem }}
                          </div>
                        </div>
                      </div>
                    </a-col>
                    <a-col :span="24">
                      <div class="fs-12">
                        <span class="fw-b">Fault Report Code</span>：{{
                          item.frc || '--'
                        }}
                      </div>
                      <div class="fs-12">
                        <span class="fw-b">Monitor Code</span>：{{
                          item.mc || '--'
                        }}
                      </div>
                    </a-col>
                    <a-col
                      v-for="ci in item.eventDetails"
                      :key="ci.id"
                      :span="24"
                    >
                      <a-row>
                        <a-col :offset="2" :span="16">
                          <div class="fs-13 text-over">
                            <span class="mr-10 fw-b">{{ ci.name || '--' }}</span><a>{{ ci.code || '--' }}</a>
                            <div>{{ ci.description || '--' }}</div>
                          </div>
                        </a-col>
                        <a-col :span="4">
                          <div class="fs-14 fw-500">
                            {{
                              ci.msgTime
                                ? $moment
                                  .utc(ci.msgTime)
                                  .format('YYYY-MM-DD HH:mm')
                                : '--'
                            }}
                          </div>
                        </a-col>
                        <a-col :span="2">
                          <div class="fw-b">
                            {{
                              ci.activity ? activeHandler(ci.activity) : '--'
                            }}
                          </div>
                        </a-col>
                      </a-row>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-col>
  <!-- </a-drawer> -->
</template>
<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
import { toJSON, toHTML } from '@/utils/htmlParser';
export default {
  props: {
    // currentRow: {
    //   type: Object,
    //   default: () => {}
    // },
    flightLegDetailsVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      legends_info: [
        'Power On (PO)',
        'Engine Start (ES)',
        'Taxi Out (TA)',
        'Takeoff Roll (TO)',
        'lnitial Climb (IC)',
        'Climb (CL)',
        'Cruise (ER)',
        'Descent (DC)',
        'Approach (AP)',
        'Go Around (GA)',
        'Flare (FL)',
        'Rollout (RO)',
        'Taxi In (TI)',
        'Engine Shutdown (SD)',
        'Maintenance (MT)'
      ],
      modalZIndexM: 2000,
      repTab: '2',
      repId: -1,
      repShow: false,
      repShowData: {},
      activeIndex: [-1],
      currentRow: {},
      activeKey: ['1'],
      activeKey2: ['1'],
      htmlSourceCode: '',

      reportTypes: [],
      flduuid: ''
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'flightLegDetailLoading',
      'flightLegDetailData',
      'flightLegDetailReportList',
      'flightLegDetailReportTypes',
      'flightLegDetailReportListNum',
      'flightLegDetailReportListLoading',
      'repAnalysisJsonData',
      'repAnalysisJsonEnding',
      'repAnalysisJsonTitle',
      'repAnalysisJsonLoading',
      'modalZIndex',
      'cfdFormat'
    ]),

    ...mapGetters('fraMonitoring', ['flightLegDetailsVisibleF']),
    tData() {
      return this.cfdFormat.filter(item => {
        return (
          item.name !== 'MMSG' &&
          !(
            item.name === 'Alert' ||
            item.eventType === 'Alert' ||
            item.msgType === 'Alert'
          ) &&
          item.code
        );
      });
    },
    bData() {
      return this.cfdFormat.filter(item => item.name === 'MMSG' && item.code);
    },
    // alertData() {
    //   return this.cfdFormat.filter(item => {
    //     return (item.name === 'Alert' || item.eventType === 'Alert' || item.msgType === 'Alert') && item.code;
    //   });
    // },
    repAnalysisJsonTitleExist() {
      return Object.values(this.repAnalysisJsonTitle).length > 0;
    },
    titleInfo() {
      return Object.values(this.flightLegDetailData).length === 0
        ? this.currentRow
        : this.flightLegDetailData;
    }
  },
  mounted() {
    const currentRow =
      sessionStorage.getItem(
        `repShowData${this.$route.query.repShowDatauuid}`
      ) ?? {};
    this.customRow(JSON.parse(currentRow));
  },
  methods: {
    ...mapActions('fraMonitoring', [
      'getFlightLegDetail',
      'getRepReportS',
      'repAnalysisJson',
      'getFormattedMessage'
    ]),
    ...mapMutations('fraMonitoring', ['setState']),
    customRow(row) {
      this.repShowData = { ...row };
      this.repShowData.content = '\r\n' + row.content;
      if (this.repTab === '2') {
        if (this.repShowData.smi === 'CFD') {
          this.getFormattedMessage({
            reportId: this.repShowData.id,
            imi: this.repShowData.imi
          });
        } else {
          this.changeTabHandler();
        }
      }
    },
    clickEvent(e, eItem) {
      this.setState({ key: 'eventDetailsVisible', payload: true });
      const currentRow = {
        event: { ...this.currentRow, ...eItem },
        ...this.currentRow
      };
      localStorage.setItem('eRow', JSON.stringify(currentRow));
    },
    // 打印
    printerHandler(e, index) {
      if (+this.repTab === +index) {
        const rdoc =
          index === 1
            ? document.querySelector('.snapshot-data-s')
            : document.querySelector('.snapshot-data-s2');
        e.stopPropagation();
        this.$nextTick(() => {
          this.$print(rdoc);
        });
      }
    },

    renderTMP(listData) {
      const iframe = document.getElementById('rep-iframe-fd');
      // 先插入将html中的document.write执行获得完整html
      iframe.contentWindow.document.write(this.repAnalysisJsonData);
      // 根据完整html过滤script
      const htmljson = toJSON(
        document.getElementById('rep-iframe-fd').contentWindow.document.body
          .innerHTML,
        {
          skipScript: true,
          skipStyle: true,
          pureClass: false,
          pureComment: true
        }
      );

      this.tmpHtml = htmljson;
      this.headCode = document.getElementById(
        'rep-iframe-fd'
      ).contentWindow.document.head.innerHTML;
      // // 将iframe中dom 更新为完成html
      iframe.contentWindow.document.open();
      iframe.contentWindow.document.write(toHTML(htmljson));
      iframe.contentWindow.document.close();

      this.htmlSourceCode = document.getElementById(
        'rep-iframe-fd'
      ).contentWindow.document.body.innerHTML;
    },
    async changeTabHandler() {
      const { id, reportType, smi, version } = this.repShowData;
      let type = 1;
      switch (smi) {
        case 'DFD':
          type = 1;
          break;

        case 'ENG':
          type = 2;
          break;
      }
      const params = {
        repReportId: id,
        templateName: reportType,
        templateType: type,
        version
      };
      if (this.repId !== id) {
        await this.repAnalysisJson(params);
        this.renderTMP();
      }
      this.repId = id;
    }
  }
};
</script>

<style lang="less">
@import './index.less';
.legend-box {
  .b {
    display: flex;
    border: 1px solid #333;
    height: 250px;
    > div {
      border-right: 1px solid #333;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      &:nth-last-child(1) {
        border-right: none;
      }
      .word {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
        writing-mode: tb-lr;
        width: 100%;
      }
      .idx {
        background-color: #040404;
        height: 50px;
        line-height: 50px;
        width: 100%;
        text-align: center;
        color: #fff;
        flex-shrink: 0;
        position: relative;
        &.aa {
          background-color: #3e46ac;
        }
        .time {
          position: absolute;
          bottom: -40px;
          left: 3px;
          color: #333;
          writing-mode: vertical-lr;
          writing-mode: tb-lr;
          transform: rotate(-30deg);
        }
      }
    }
  }
}
</style>
